<template>
  <div class="standard-grid --padding-horizontal --auto-rows recommend-index ">
    <common-lists :data="recommendLists"></common-lists>
  </div>
</template>
<script lang="ts">
  import Vue from 'vue'
  import Component from 'vue-class-component'
  import CommonLists from '../../components/common/common-lists'
  import {Prop} from "vue-property-decorator";
  import {recommendListsInterface, recommentInterface} from "../../interfaces/PageInterface";
  @Component({
    components:{
      CommonLists
    }
  })

  export default class RecommendIndex extends Vue {
    @Prop({type:Object})recommendData:recommentInterface

    get recommendLists():recommendListsInterface[]{
        return this.recommendData.info.map(({hash,filename}) => {
          return {
            name:filename.substring(0,filename.indexOf('-')),
            author:filename.substring(filename.indexOf('-') + 1,filename.length)
          }
        })
    }

    private mounted(){
      console.log(this.recommendData,123)
    }
  }

</script>
<style lang="scss">
  @include component(recommend-index){
     @extend %padding;

  }
</style>
